import React, { useState } from "react";
import { SettingOutlined, HomeOutlined } from "@ant-design/icons";
import type { MenuProps } from "antd";
import { message } from "antd";
import { Menu } from "antd";
import { useNavigate } from "react-router-dom";
import { removeToken } from "@/utils/auth";

const items: MenuProps["items"] = [
  {
    label: "首页",
    key: "home",
    icon: <HomeOutlined />,
  },
  {
    label: "个人中心",
    key: "SubMenu",
    icon: <SettingOutlined />,
    children: [
      {
        label: "个人详情",
        key: "userMore",
      },
      {
        label: "退出登录",
        key: "loginOut",
      },
    ],
  },
];

const TopMenu: React.FC = () => {
  const [current, setCurrent] = useState("");
  const navigateTo = useNavigate();

  const onClick: MenuProps["onClick"] = (e) => {
    setCurrent(e.key);
    if (current === "loginOut") {
      navigateTo("/login");
      removeToken();
      message.success("您已退出登录");
    }
  };

  return (
    <Menu
      onClick={onClick}
      selectedKeys={[current]}
      mode="horizontal"
      items={items}
      style={{ marginRight: 0 }}
    />
  );
};

export default TopMenu;
